import React, { Ref, useRef, useState, useEffect } from 'react';
import { MaterialManageAPI } from '../common/type';
import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import pageStyles from '@/common/pageLayout.less';
import { Button, Col, Form, Input, Row, Select, Spin, message } from 'antd';
import { useRequest } from 'umi';
import { loadMdicMap } from '@/services/BaseLayout';
import { getLoadMapList, getTenantID, onCloseModalCommon } from '@/utils';
import { ILoadMapTypeAll } from '@/common';
import { cancelMaterialServices } from '../services';
import { CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';

const loadMdicIds: string[] = [`${getTenantID()}${ILoadMapTypeAll.MATERIAL_CANCEL}`];

const MaterialCancelModal: React.FC<MaterialManageAPI.ICancelModalAPI> = ({ onClose, checkRows, isShowModal, reloadManage }) => {
  /**Spin*/
  const [isSpin, setIsSpin] = useState(false);

  /**表单的ref*/
  const [cencelForm] = Form.useForm(); //表单 form

  /**弹框的ref*/
  const cencelModalRef: Ref<IOneModalRef> = useRef(null);

  /**作废Callback*/
  const cancelMaterialCallback = (res: any) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
      onCloseModalCommon(cencelModalRef);
      reloadManage();
    }
  };

  /**作废services*/
  const { cancelMaterialRun, cancelMaterialLoading } = cancelMaterialServices(cancelMaterialCallback);

  /**弹窗点击确定方法*/
  const saveCheck = () => {
    cencelForm?.validateFields().then((res) => {
      cancelMaterialRun({
        ...res,
        id: checkRows?.id,
        versionNum: checkRows?.versionNum,
      });
    });
  };

  /**获取数据字典loadMdicMap*/
  // const loadMdicMapList = useRequest(
  //   () => {
  //     return loadMdicMap([`${getTenantID()}${ILoadMapTypeAll.MATERIAL_CANCEL}`]);
  //   },
  //   { manual: false },
  // );

  const { loadMapInfo: loadMdicMapList, mapLoading } = getLoadMapList(loadMdicIds);

  useEffect(() => {
    if (isShowModal === true) {
      setIsSpin(true);
      setTimeout(() => {
        setIsSpin(false);
      }, 800);
    }
  }, []);

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={cencelModalRef}
        title={'作废物料'}
        width={document.body.clientWidth * 0.3}
        onCancel={onClose}
        bodyStyle={{ padding: '20px 0px' }}
        centered
        onOk={saveCheck}
        // footer={[
        //   <Button
        //     key="back"
        //     loading={isSpin || cancelMaterialLoading}
        //     onClick={() => {
        //       onCloseModalCommon(cencelModalRef);
        //     }}
        //     icon={<CloseCircleOutlined />}
        //   >
        //     取消
        //   </Button>,
        //   <Button
        //     key="submit"
        //     type="primary"
        //     loading={isSpin || cancelMaterialLoading}
        //     onClick={saveCheck}
        //     icon={<CheckCircleOutlined />}
        //   >
        //     确定
        //   </Button>
        // ]}
        confirmLoading={isSpin || cancelMaterialLoading}
      >
        <Spin spinning={isSpin || cancelMaterialLoading}>
          <div className={pageStyles['fromView-styles']}>
            <Form labelAlign="right" form={cencelForm}>
              <Row>
                <Col span={24}>
                  <Form.Item
                    name="cancelType"
                    label="作废类型"
                    rules={[
                      {
                        required: true,
                        message: '请选择作废类型',
                      },
                    ]}
                  >
                    <Select placeholder="请选择作废类型" allowClear loading={mapLoading}>
                      {loadMdicMapList?.[`${getTenantID()}${ILoadMapTypeAll.MATERIAL_CANCEL}`]?.map((item: any) => {
                        return (
                          <Select.Option key={item?.id} value={item?.id}>
                            {item?.name}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label="作废原因"
                    name="cancelReason"
                    rules={[
                      {
                        required: true,
                        message: '请填写作废原因',
                      },
                    ]}
                  >
                    <Input.TextArea placeholder={`请填写作废原因`} showCount maxLength={200} autoSize={{ minRows: 2, maxRows: 4 }} />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </div>
        </Spin>
      </OneModal>
    </>
  );
};

export default MaterialCancelModal;
